<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=750,user-scalable=0" />
		<title>Document</title>
		<style>
			.container {
				width: 750px;
				height: 1268px;
				overflow: hidden;
				position: relative;
			}
			
			.box {
				width: 450px;
				height: 450px;
				border: 1px solid #f00;
				position: absolute;
				left: 150px;
				top: 125px;
				transform: rotate(0deg);
				transition: 0.5s;
				display: none;
			}
			
			.box img{
				width: 100%;
			}
			
			.box:first-child {
				width: 500px;
				height: 500px;
				left: 125px;
				top: 100px;
				display: block;
			}
			
			.box:nth-child(2) {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="box">
				<img src="1.png" />
			</div>
			<div class="box">
				<img src="2.png" />
			</div>
			<div class="box">
				<img src="3.png" />
			</div>
			<div class="box">
				<img src="4.png" />
			</div>
		</div>
	</body>
	<script src="jquery.min.js"></script>
	<script>
		var t = false; // 划动开关
		var tX = 0; // 鼠标点下去时的X轴坐标
		var tY = 0; // 鼠标点下去时的Y轴坐标
		var rotate = 0; // 翻转的角度

		var box1 = $('.box')[0]
		var box = $('.box').eq(0)

		$('.box').eq(0).show()

		// box1.addEventListener("touchstart", function (e){
		// 		// 点下时，允许鼠标移动，并获取坐标
		// 	t = true;
		// 	tX = e.changedTouches[0].clientX
		// 	tY = e.changedTouches[0].clientY
		// })
		$('.box').on("touchstart", function(e) {
			touch = e.originalEvent.targetTouches[0]

			// 点下时，允许鼠标移动，并获取坐标
			t = true;
			tX = touch.clientX
			tY = touch.clientY

			box.css('transition', '0s')

		})

		document.addEventListener("touchmove", function(e) {

			if(t) {

				// 获取移动时的坐标	
				ytx = e.changedTouches[0].clientX
				yty = e.changedTouches[0].clientY

				// 相减
				nowX = ytx - tX
				nowY = yty - tY

				tX = ytx
				tY = yty

				// 小于1 左移，大于1 右移
				l = box.css('left')
				if(nowX < 1) {
					box.css('left', parseInt(l) + parseInt(nowX))
					rotate -= nowX / 10;
					if(rotate >= 9) {
						rotate = 9
					}

					// 修改宽度
					sw = $('.box').eq(1).css('width')
					sw = parseInt(sw) - parseInt(nowX) * 8

					// 修改左边距离
					lw = $('.box').eq(1).css('left')
					lw = parseInt(lw) + parseInt(nowX) * 2

					// 修改高度
					hw = $('.box').eq(1).css('height')
					hw = parseInt(hw) - parseInt(nowX) * 8

					// 修改顶部距离
					tw = $('.box').eq(1).css('top')
					tw = parseInt(tw) + parseInt(nowX) * 2

					if(lw < 125) {
						lw = 125
					}

					if(sw > 500) {
						sw = 500
					}

					if(hw > 500) {
						hw = 500
					}

					if(tw < 100) {
						tw = 100
					}

					// 修改位置

					$('.box').eq(1).css('width', sw)
					$('.box').eq(1).css('left', lw)
					$('.box').eq(1).css('height', hw)
					$('.box').eq(1).css('top', tw)

					box.css('transform', 'rotate(' + rotate + 'deg)')

				} else {
					box.css('left', parseInt(l) + parseInt(nowX))

					rotate -= nowX / 10;
					if(rotate <= -9) {
						rotate = -9
					}

					// 修改宽度
					sw = $('.box').eq(1).css('width')
					sw = parseInt(sw) + parseInt(nowX) * 8

					// 修改左边距离
					lw = $('.box').eq(1).css('left')
					lw = parseInt(lw) - parseInt(nowX) * 2

					// 修改高度
					hw = $('.box').eq(1).css('height')
					hw = parseInt(hw) + parseInt(nowX) * 8

					// 修改顶部距离
					tw = $('.box').eq(1).css('top')
					tw = parseInt(tw) - parseInt(nowX) * 2

					if(lw < 125) {
						lw = 125
					}

					if(sw > 500) {
						sw = 500
					}

					if(hw > 500) {
						hw = 500
					}

					if(tw < 100) {
						tw = 100
					}

					// 修改位置

					$('.box').eq(1).css('width', sw)
					$('.box').eq(1).css('left', lw)
					$('.box').eq(1).css('height', hw)
					$('.box').eq(1).css('top', tw)

					box.css('transform', 'rotate(' + rotate + 'deg)')
				}

				h = box.css('top')
				if(nowY < 1) {

					box.css('top', parseInt(h) + parseInt(nowY))

				} else {

					box.css('top', parseInt(h) + parseInt(nowY))

				}
			}
		})

		document.addEventListener('touchend', function(e) {
			le = box.css('left')
			if(parseInt(le) <= 125) {

				if(parseInt(le) < -140) {
					box.remove()
					box1 = $('.box')[0]
					box = $('.box').eq(0)
				} else {
					box.css('transition', '0.3s')
					box.css({
						transform: 'rotate(0deg)',
						'top': '100px',
						'left': '125px'
					})
					$('.box').eq(1).attr('style', '')
				}

			} else {

				if(parseInt(le) > 550) {
					box.remove()
					box1 = $('.box')[0]
					box = $('.box').eq(0)
				} else {
					box.css('transition', '0.3s')
					box.css({
						transform: 'rotate(0deg)',
						'top': '100px',
						'left': '125px'
					})
					$('.box').eq(1).attr('style', '')
				}
			}
		})

		// 删除之后的回调函数
		// 移动时的回调函数
	</script>

</html>